/**
 * 物业费
 * @author truexin
 * @date   2016/11/08
 */

import PullRefresh from '../components/mui/PullRefresh.js';
import MenuBtn from '../components/MenuBtn.js';


const lf = liefeng,
    R = React,
    RC = React.createClass,
    getUrlParam = lf.utils.getUrlParam,
    doAction = lf.bridgeJs.doAction,
    ajax = lf.utils.ajax;

let type = getUrlParam('type');

const SelectMonth = RC({
    getInitialState() {
        return {
            title: '2016年11月'
        }
    },
    
    componentWillMount() {
        
    },
    
    render() {
        return <div className="flex select-month">
            <p className="flex-item">
                <span className="arrowleft mui-icon mui-icon-arrowleft"></span>
                <span className=" title-name">{this.state.title}</span>
                <span className="arrowright mui-icon mui-icon-arrowright"></span>
            </p>
        </div>
    }
})
const TwoBtn = RC({
    getInitialState() {
        return {}
    },
    
    componentWillMount() {
        
    },
    
    render() {
        return <div className="flex">
            <div className="flex-item panel">
                <p className="this-month">本月收益(元)</p>
                <p className="counts">448,448,448</p>
            </div>
            <div className="flex-item panel">
                <p className="this-month">累计欠费(元)</p>
                <p className="counts red">341,746,280</p>
            </div>
        </div>
    }
})
const Project = RC({
    getInitialState() {
        return {}
    },
    
    componentWillMount() {
        
    },
    componentDidMount() {
        let data = this.props.data;
        let projectName = '';
        if (type == 'car') {
            return
        } else {
            let name = data.name;
            if (name == '锦鸿花园') {
                projectName = 1;
            } else if (name == '紫苑') {
                projectName = 2;
            } else if (name == '东江乐乐家') {
                projectName = 3;
            } else {
                projectName = 4;
            }
            $(R.findDOMNode(this.refs.link)).on('tap', ()=> {
                doAction('fee-home-detail.html?name=' + projectName, '物业费详情');
            })
        }
    },
    
    render() {
        let data = this.props.data;
        let rangeList = {};
        if (type == 'car') {
            rangeList = {
                one: '昨日收益',
                two: '本月总额',
            }
        } else {
            rangeList = {
                one: '本月收益',
                two: '累计欠费',
            }
        }
        return <div className="mui-table-view-cell flex" ref="link">
            <div className="flex-item name">
                {data.name}
            </div>
            <div className="flex-item long">
                <p className="this-month">
                    <span className="range">{rangeList.one + ' : '}</span>
                    <span className=" blue">{ ' ' + data.month + '元'}</span>
                </p>
                <p className="counts">
                    <span className="range">{rangeList.two + ' : '} </span>
                    <span className={type=='car' ? '' : 'red'}>{ ' ' + data.owe + '元'}</span>
                </p>
            </div>
        </div>
    }
})
const ProjectList = RC({
    getInitialState() {
        return {}
    },
    
    componentWillMount() {
        let projectList = {};
        if (type == 'car') {
            projectList = [
                {
                    name: '锦鸿花园',
                    month: '16,056,056',
                    owe: '555,500,500'
                }, {
                    name: '紫苑',
                    month: '12,112,122',
                    owe: '155,500,500'
                }, {
                    name: '东江乐乐家',
                    month: '56,056,056',
                    owe: '155,190,180'
                }, {
                    name: '列丰小区',
                    month: '24,224,224',
                    owe: '155,555,100'
                },
            ];
        } else {
            projectList = [
                {
                    name: '锦鸿花园',
                    month: '56,056,056',
                    owe: '55,500,500'
                }, {
                    name: '紫苑',
                    month: '112,112,122',
                    owe: '115,500,500'
                }, {
                    name: '东江乐乐家',
                    month: '56,056,056',
                    owe: '15,190,180'
                }, {
                    name: '列丰小区',
                    month: '224,224,224',
                    owe: '155,555,100'
                },
            ];
        }

        this.setState({
            projectList: projectList
        })
    },
    
    render() {
        let list = this.state.projectList.map((data, i)=> {
            return <Project data={data}/>
        })
        return <div className="project-list">
            {list}
        </div>
    }
})
const Root = RC({
    getInitialState() {
        return {}
    },
    
    componentWillMount() {
        
    },
    
    render() {
        return <div className="fee-census fee-home">
            <SelectMonth/>
            {
                type == 'car' ?
                    <div className="car">
                        <div className="mui-table-view-cell car-top">
                            <p>昨日收益（元）</p>
                            <p className="blue">448,448,448</p>
                        </div>
                        <div className="flex car-link">
                            <p className="flex-item">
                                <span className="range">本月总额 : </span>
                                <span> 341,746,280元</span>
                            </p>
                            <p className="flex-item">
                                <span className="range">同比情况 : </span>
                                <span> 10%</span>
                            </p>
                        </div>
                    </div>
                    : <TwoBtn/>
            }
            <ProjectList/>
        </div>
    }
});

lf.appJs.getUser(function (user) {
    if (type == 'car') {
        lf.appJs.setTitle('停车费');
    } else {
        lf.appJs.setTitle('物业费');
    }
    R.render(
        <Root user={user}/>,
        document.getElementById('root'), ()=> {
            $('#root').css({
                background: '#f2f2f2',
            });
            $('html').css({
                height: '100%'
            });
            $('body').css({
                height: '100%'
            });
        }
    );
});



